<template>
    
    <!-- 组件的模板 -->
    <div class="page">
        <div class="weui-cells__title">工资明细</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title">基本工资</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input money" type="tel" placeholder="请输入" v-model="base_wage">
                </div>
            </div>
            <template v-for="item in extra_pay">
                <div class="weui-cell" v-if="item.select == 1">
                    <div class="weui-cell__hd"><label class="weui-label title">{{item.name}}</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input money" type="number" placeholder="选填" v-model="item.value">
                    </div>
                </div>
            </template>
            <p class="total com-border-top com-border-bottom">合计：<em>{{bar_total_wage}}</em></p>
        </div>
        <div class="weui-cells__title">备注信息</div>
        <div class="weui-cells weui-cells_form" style="margin-bottom: 12px;">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入" rows="3" v-model="remark" maxlength="100"></textarea>                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage.js'
    import cache from 'gapi/cache.js'
    import widget from 'gapi/widget'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                "base_wage": '',
                "extra_pay": [
                    // {
                    //     "key": 1,
                    //     "name": "加班费",
                    //     "flag": 1,
                    //     "value": '',
                    //     select: 0
                    // },
                    // {
                    //     "key": 1,
                    //     "name": "奖金",
                    //     "flag": 1,
                    //     "value": ''
                    // },
                    // {
                    //     "key": 1,
                    //     "name": "提成",
                    //     "flag": 1,
                    //     "value": ''
                    // },
                    // {
                    //     "key": 1,
                    //     "name": "扣款",
                    //     "flag": 1,
                    //     "value": ''
                    // },
                    // {
                    //     "key": 1,
                    //     "name": "其他",
                    //     "flag": 1,
                    //     "value": ''
                    // }
                ],
                "bar_total_wage": 0,
                "remark": "",
                selectedNum: 0,//批量编辑人数
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                this.selectedNum = util.getUrddataString('selectedNum')
                document.title = `批量编辑(${this.selectedNum})`
                cache.getCache('PayEditPerDetailParam', (data) => {
                    console.log(data)
                    if(data){
                        let tempArr = []
                        data.forEach((obj) => {
                            // if(obj.value == 0){
                                obj.value = ''
                            // }else{
                                // obj.value = obj.value/100
                            // }
                            tempArr.push(obj)
                        })
                        this.extra_pay = tempArr
                        this.doWatch()
                    }
                    
                })
                
            },
            doWatch(){
                this.$watch('extra_pay', (newV, oldV) => {
                    // console.log(newV)
                    let total_wage = 0
                    this.extra_pay.forEach((obj) => {
                        if(!isNaN(Number(obj.value))){
                            total_wage += Number(obj.value)*Number(obj.flag)
                        }
                    })
                    this.bar_total_wage = (total_wage + Number(this.base_wage)).toFixed(2)
                }, {deep: true})

                this.$watch('base_wage', (newV, oldV) => {
                    // console.log(newV)
                    // if(!isNaN(Number(newV)) && !isNaN(Number(oldV))){
                    //     this.bar_total_wage += Number(newV) - Number(oldV)
                    // }
                    let total_wage = 0
                    this.extra_pay.forEach((obj) => {
                        if(!isNaN(Number(obj.value))){
                            total_wage += Number(obj.value)*Number(obj.flag)
                        }
                    })
                    this.bar_total_wage = (total_wage + Number(this.base_wage)).toFixed(2)
                }, {deep: true})
            },
            doSubmit(){
                if(this.base_wage > 1000000){
                    widget.toast('输入金额不能超过100万')
                    return
                }
                for(let i = 0; i < this.extra_pay.length;i ++){
                    if(this.extra_pay[i].value > 1000000){
                        widget.toast('输入金额不能超过100万')
                        return
                    }
                }
                if(this.bar_total_wage < 0){
                    widget.toast('扣款金额不能超过工资总金额')
                    return
                }
                this.base_wage = this.base_wage === '' ? -1 : this.base_wage*100
                let tempArr = []
                this.extra_pay.forEach((obj) => {
                    if(obj.value === ''){
                        obj.value = -1
                    }else{
                        obj.value = obj.value*100
                    }
                    tempArr.push(obj)
                })
                this.extra_pay = tempArr
                console.log(JSON.stringify({base_wage: this.base_wage, extra_pay: this.extra_pay, bar_total_wage: this.bar_total_wage*100, remark: this.remark}))
                commonPage.goBack(1, {key: 'OPERATION_FORM_BATCH_EDIT', value: {base_wage: this.base_wage, extra_pay: this.extra_pay, bar_total_wage: this.bar_total_wage*100, remark: this.remark}})
            }
        },
        created(){

            this.init();
            
            commonPage.updateTitleBar({
                // backAction: 'checkChange',    // 点击返回按钮的动作（即回调函数名称）
                // leftDisplay: false,            // 是否显示左按钮
                // leftText: '',                // 左按钮文案
                // leftAction: 'checkChange',    // 点击左按钮的动作（即回调函数名称）
                rightDisplay: true,            // 是否显示右按钮
                rightText: '完成',            // 右按钮文案
                rightAction: 'doSubmit'    // 点击右按钮的文案（即回调函数名称）
            })
            window.doSubmit = this.doSubmit
        },
        ready(){
            setTimeout(() => {
                $('.money').on('textInput',(event) => {
                    // console.log(event)
                    if(event.data == 0 || event.data == 1 || event.data == 2 || event.data == 3 || event.data == 4 || event.data == 5 || event.data == 6 || event.data == 7 || event.data == 8 || event.data == 9){

                        // console.log(event.data)
                        if(event.target.value == '' && event.data == 0){
                            event.preventDefault()
                        }
                        if(event.target.value.indexOf('.') > -1 && event.target.value.length >= event.target.value.indexOf('.')+3){
                            event.preventDefault()
                        }

                    }else if(event.data == '.'){
                        if(event.target.value.indexOf('.') > -1 || event.target.value == ''){
                            event.preventDefault()
                        }
                        // console.log(event.target.value)
                    }else{
                        event.preventDefault()
                    }
                })
            },100)
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/salary.css"></style>


